<template>
  <div class="popup">
    <van-search
      v-model="iptVal"
      show-action
      :placeholder="iptPlaceholder"
      @search="onSearch"
      @input="onInput"
    >
      <template #action>
        <div @click="onCancel">取消</div>
      </template>
    </van-search>
    <!-- <van-search
      v-model="iptVal"
      show-action
      :placeholder="iptPlaceholder"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    /> -->

    <!-- 历史记录热门搜索组件 -->
    <HistoryHot v-if="blockShow == 1" :historyKeywordList="historyKeywordList" :hotKeywordList="hotKeywordList" @tagClick="tagClick" />

    <!-- 搜索列表区块 -->
    <MyList v-else-if="blockShow == 2" :arr="listArr" @cellClick="tagClick" />

    <!-- 产品区块 -->
    <MyProduct v-else :filterCategory="filterCategory" :goodsList="goodsList" @categoryChange="categoryChange" @priceChange="priceChange" />

    <BackTop/>
  </div>
</template>

<script>
import HistoryHot from '../components/popup/HistoryHot.vue'
import MyProduct from '../components/popup/MyProduct.vue'
import MyList from '../components/popup/MyList.vue'
import BackTop from '../components/BackTop.vue'
import { GetPopupData, GetSearchData, GetTimeData } from '../request/api'
export default {
  name: 'MyPopup',
  components: {
    HistoryHot,
    MyList,
    MyProduct,
    BackTop
  },
  data() {
    return {
      iptVal: '',
      iptPlaceholder: '',
      // 区块显示(1代表HistoryHot，2代表List，3代表Products)
      blockShow: 1,
      // 历史区块的数组
      historyKeywordList: [],
      // 热门搜索的数组
      hotKeywordList: [],
      // 传递给MyProduct组件的分类数据
      filterCategory: [],
      // 传递给MyProduct组件的商品列表数据
      goodsList: [],
      // 价格排序
      order: "desc",
      // 分类的id
      categoryId: 0,
      // 排序的方式,id就是默认的排序方式，price就是价格排序
      sort: 'id',
      // List组件的数组
      listArr: []
    }
  },
  methods: {
      // 子传父过来调用的方法
      categoryChange(val) {
        this.categoryId = val
        this.onSearch()
      },
      priceChange(val) {
        this.order = val
        this.sort = 'price'
        this.onSearch()
      },
      // 搜索
      onSearch() {
        GetSearchData({
        keyword: this.iptVal,
        page: 1,
        size: 20,
        order: this.order, //价格排序
        categoryId: this.categoryId,
        sort: this.sort
      }).then(res => {
          if(res.errno == 0) {
            this.blockShow = 3
            let {filterCategory, goodsList} = res.data;
            // 因为vant下拉菜单中的名字必须为text和value，所以在这儿进行改名（深拷贝）
            let arr = JSON.parse(JSON.stringify(filterCategory).replace(/name/g, 'text').replace(/id/g, 'value'));
            this.filterCategory = arr
            this.goodsList = goodsList
          }
        })
      },
      // 实时搜索
      onInput() {
        // 实时搜索的同时显示列表区块,把blockShow设为2
        this.blockShow = 2
        GetTimeData({
          keyword: this.iptVal
        }).then(res => {
          if (res.errno == 0) {
            this.listArr = res.data;
          }
        })
      },
      // 历史区块的标签点击,点击搜索列表时进行搜索的合并事件
      tagClick(val) {
        this.iptVal = val
        this.onSearch()
      },
      // 取消
      onCancel() {
        this.$router.go(-1)
      }
  },
  created() {
    GetPopupData().then(res => {
      if (res.errno == 0) {
        let { defaultKeyword, historyKeywordList, hotKeywordList } = res.data
        this.iptPlaceholder = defaultKeyword.keyword
        this.historyKeywordList = historyKeywordList
        this.hotKeywordList = hotKeywordList
      }
    }).catch(err => {
      console.log(err);
    })
  },
}
</script>

<style scoped>
.popup {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  background-color: #efefef;
  z-index: 999;
}
</style>